import { PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Calendar, Card, Col, Input, Row, Select, Space } from 'antd';
import React, { useRef, useState } from 'react';
import EditForm from './editForm';
import { FormattedMessage } from '@umijs/max';

const { Search } = Input;
const { Option } = Select;

interface ScheduleItem {
  id: string;
  name: string;
  startTime: string;
  endTime: string;
  relatedGroup: string;
  relatedRule: string;
}

const data: ScheduleItem[] = [
  {
    id: '1',
    name: '5月-10月白班车间',
    startTime: '2024-06-05',
    endTime: '2024-09-04',
    relatedGroup: '行政白班',
    relatedRule: '白班',
  },
];

const SchedulePage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [selectedPlan, setSelectedPlan] = useState<string>('5月-10月白班车间');
  const [tableData, setTableData] = useState<ScheduleItem[]>(data);

  const columns = [
    {
      title: '计划名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
    {
      title: '关联考勤组',
      dataIndex: 'relatedGroup',
      key: 'relatedGroup',
    },
    {
      title: '关联考勤规则',
      dataIndex: 'relatedRule',
      key: 'relatedRule',
    },
    {
      title: '操作',
      key: 'action',
      render: () => <Button type="link">清理</Button>,
    },
  ];

  const onSearch = (value: string) => {
    console.log(value);
    // 可以添加搜索逻辑
  };

  return (
    <PageContainer>
      <Row gutter={16}>
        <Col span={12}>
          <Card
            title={
              <Space>
                <Search
                  placeholder="请输入考勤计划名称"
                  onSearch={onSearch}
                  style={{ width: 200 }}
                />
                <Button type="primary">查询</Button>
                <Button>重置</Button>
                <EditForm
                  key="create"
                  onOk={actionRef.current?.reload}
                  trigger={
                    <Button type="primary" icon={<PlusOutlined />}>
                      <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
                    </Button>
                  }
                />
              </Space>
            }
          >
            <ProTable<ScheduleItem>
              columns={columns}
              dataSource={tableData}
              rowKey="id"
              search={false}
              pagination={{ pageSize: 10 }}
              toolBarRender={false}
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <div style={{ marginBottom: 16 }}>
              <span>考勤计划：</span>
              <Select
                value={selectedPlan}
                style={{ width: 200 }}
                onChange={(value) => setSelectedPlan(value)}
              >
                {data.map((item) => (
                  <Option key={item.id} value={item.name}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </div>
            <Calendar
              fullscreen={false}
              dateCellRender={(date) => {
                const formattedDate = date.format('MM-DD');
                if (
                  formattedDate === '06-02' ||
                  formattedDate === '06-09' ||
                  formattedDate === '06-16'
                ) {
                  return (
                    <div
                      style={{
                        textAlign: 'center',
                        backgroundColor: '#e6f7ff',
                        borderRadius: '4px',
                      }}
                    >
                      休息
                    </div>
                  );
                }
                return null;
              }}
              headerRender={({ value, type, onChange, onTypeChange }) => {
                const monthOptions = [];
                const current = value.clone();
                const localeData = value.localeData();
                const months = [];

                for (let i = 0; i < 12; i++) {
                  current.month(i);
                  months.push(localeData.monthsShort(current));
                }

                for (let i = 0; i < 12; i++) {
                  monthOptions.push(
                    <Select.Option key={i} value={i} className="month-item">
                      {months[i]}
                    </Select.Option>,
                  );
                }

                const month = value.month();
                const year = value.year();
                const options = [];
                for (let i = year - 10; i < year + 10; i++) {
                  options.push(
                    <Select.Option key={i} value={i} className="year-item">
                      {i}
                    </Select.Option>,
                  );
                }

                return (
                  <div style={{ padding: 8 }}>
                    <Row gutter={8}>
                      <Col>
                        <Select
                          size="small"
                          dropdownMatchSelectWidth={false}
                          value={year}
                          onChange={(newYear) => onChange(value.clone().year(newYear))}
                        >
                          {options}
                        </Select>
                      </Col>
                      <Col>
                        <Select
                          size="small"
                          dropdownMatchSelectWidth={false}
                          value={month}
                          onChange={(newMonth) => onChange(value.clone().month(newMonth))}
                        >
                          {monthOptions}
                        </Select>
                      </Col>
                    </Row>
                  </div>
                );
              }}
            />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default SchedulePage;
